<template>
  <el-dialog title="创建App" :visible.sync="dialogVisible" width="625px" :before-close="handleClose" custom-class="dialog">
    <el-form ref="form" :model="formInfo" :rules="rules" label-width="140px" label-position="right">
      <el-row>
        <el-col :span="14">
          <el-form-item label="应用名称" prop="applyName" class="custom-form-item">
            <el-input
              v-model="formInfo.applyName"
              placeholder="请输入应用名称"
              maxlength="10"
              show-word-limit
              clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="Android 应用包名" prop="AndroidName" class="custom-form-item">
            <el-input
              v-model="formInfo.AndroidName"
              placeholder="请输入Android 应用包名"
              maxlength="64"
              show-word-limit
              clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="IOS 应用包名" prop="iosName" class="custom-form-item">
            <el-input
              v-model="formInfo.iosName"
              placeholder="请输入IOS 应用包名"
              clearable
              maxlength="64"
              show-word-limit
              :rows="4"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="14" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="14" @click="onSubmit">确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'createApp',
  data() {
    return {
      dialogVisible: false,
      formInfo: {
        applyName: '',
        AndroidName: '',
        iosName: ''
      },
      rules: {
        applyName: [
          { required: true, message: '请输入应用名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
          { validator: this.validateApplyName, trigger: 'blur' }
        ],
        AndroidName: [
          { required: true, message: '请输入Android 应用包名', trigger: 'blur' }
        ],
        iosName: [
          { required: true, message: '请输入IOS 应用包名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateApplyName(rule, value, callback) {
      const flag = new RegExp(/^[\u4E00-\u9FFFa-zA-Z\p{P}]+$/u).test(value)
      if (!flag) {
        callback(new Error('请使用规范名称'))
      } else {
        callback()
      }
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
      this.$refs['form'].resetFields()
    },
    // 创建App
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('提交成功')
          this.$refs['form'].resetFields()
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
